<template>
  <div class="ui register">
    <h1>{{ msg }}</h1>
    <h2>请使用邮箱注册</h2>
    <div class="ui form register-form">
      <div class="item">
        <label for="email"></label>
        <input id="email" type="text" v-model="email" placeholder="邮箱">
      </div>

      <div class="item">
        <label for="password"></label>
        <input id="password" type="password" v-model="password" placeholder="密码">
      </div>

      <div class="item">
        <label for="confirmPassword"></label>
        <input id="confirmPassword" type="password" v-model="confirmPassword" placeholder="确认密码">
      </div>

      <div class="item">
        <p> {{ err }} </p>
      </div>
      <div class="item">
        <button class="ui button green" type="button" v-on:click="register">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'register',
    data () {
      return {
        msg: 'golang+vue2',
        email: '',
        password: '',
        confirmPassword: '',
        err: ''
      }
    },
    methods: {
      register () {
        if (this.email === '') {
          this.err = '请填写邮箱'
          return
        }
        if (this.passwd === '') {
          this.err = '请填写密码'
          return
        }
        if (this.confirmPassword === '') {
          this.err = '请填写确认密码'
          return
        }
        if (this.password !== this.confirmPassword) {
          this.err = '两次密码不一致'
          return
        }
        var _this = this
        var data = {
          email: this.email,
          password: this.password,
          confirm_password: this.confirmPassword
        }
        this.$api.register(data).then(function (data) {
          if (data.code === 0) {
            _this.$store.commit('updateUser', data.data.user)
            _this.$store.commit('updateToken', data.data.token)
            _this.$store.commit('updateWs', null)
            _this.$router.push('/')
          } else {
            _this.err = data.msg
          }
        })
      }
    }
  }
</script>

<style scoped>
  .register {
    position: fixed;
    margin: 100px auto 0 auto;
    text-align: center;
    width: 1040px;
    padding: 10px 60px;
  }
  .register-form .item {
    margin-bottom: 10px;
  }
  .register-form input[type="text"],.register-form input[type="password"] {
    width: 300px;
  }
</style>
